<template>
  <div class="commonBoxmp white-bg">
    <TableV2
      @getHeight="getHeight"
      :searchBool="true"
      :column="state.columnData"
      @getCurrentColumns="getCurrentColumns"
      @handleSeach="handleSeach"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <template #tableHeader>
        <div class="jcb aic w100">
          <h3 class="mx15">基础表格</h3>
          <el-button type="primary" @click="roleDrawer = true"
          >新增角色</el-button
        >
        </div>
      </template>
      <template #tableContent>
        <div class="flex1">
          <el-table
            class="cP"
            :height="state.height"
            :data="state.tableData"
            @current-change="handleCurrentChangeRow"
          >
            <el-table-column type="index"></el-table-column>
            <el-table-column
              v-for="(item, index) in state.columnData"
              :key="index"
              :label="item.label"
              :prop="item.prop"
            >
              <template
                v-if="item.render && item.prop == 'status'"
                #default="scope"
              >
                <el-switch v-if="scope.row.edit" v-model="scope.row.switch">
                </el-switch>
                <el-tag v-else :type="scope.row.switch ? '' : 'danger'">{{
                  scope.row.switch ? "开启" : "关闭"
                }}</el-tag>
              </template>
              <template
                v-if="item.render && item.prop == 'address'"
                #default="scope"
              >
                <el-input
                  v-if="scope.row.edit"
                  v-model="scope.row.address"
                  placeholder="地址"
                ></el-input>
                <span v-else>{{ scope.row.address }}</span>
              </template>
              <template
                v-if="item.render && item.prop == 'name'"
                #default="scope"
              >
                <el-link @click.native="handleGoDetail" type="primary">{{
                  scope.row.name
                }}</el-link>
              </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" align="right">
              <template #default="scope">
                <el-icon
                  v-if="scope.row.edit"
                  class="mx15"
                  color="#67C23A"
                  size="18px"
                  @click="handleEdit(scope.$index, scope.row)"
                  ><check
                /></el-icon>

                <el-button
                  size="small"
                  type="danger"
                  class="mx15"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </TableV2>
    <el-dialog
      v-model="centerDialogVisible"
      title="Notice"
      width="80%"
      destroy-on-close
      center
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
      >
        <el-form-item label="Activity name" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="Activity zone" prop="region">
          <el-select v-model="ruleForm.region" placeholder="Activity zone">
            <el-option label="Zone one" value="shanghai"></el-option>
            <el-option label="Zone two" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Activity time" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                v-model="ruleForm.date1"
                type="date"
                placeholder="Pick a date"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="text-center" :span="2">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                v-model="ruleForm.date2"
                placeholder="Pick a time"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery" prop="delivery">
          <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="Activity type" prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox label="Online activities" name="type"></el-checkbox>
            <el-checkbox label="Promotion activities" name="type"></el-checkbox>
            <el-checkbox label="Offline activities" name="type"></el-checkbox>
            <el-checkbox
              label="Simple brand exposure"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="Sponsorship"></el-radio>
            <el-radio label="Venue"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form" prop="desc">
          <el-input v-model="ruleForm.desc" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >Create</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
      <span
        >Notice: before dialog gets opened for the first time this node and the
        one bellow will not be rendered</span
      >
      <div>
        <strong>Extra content (Not rendered)</strong>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
import Column from "/@ts/components/table/Column";
import type { ElForm } from "element-plus";
let centerDialogVisible = ref(false);

type FormInstance = InstanceType<typeof ElForm>;
const handleEdit = (index: number) => {
  state.tableData[index].edit = false;
};
const formSize = ref("");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
interface User {
  date: string;
  name: string;
  address: string;
  edit: boolean;
  index: number;
}
const rules = reactive({
  name: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
    {
      min: 3,
      max: 5,
      message: "Length should be 3 to 5",
      trigger: "blur",
    },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    {
      required: true,
      message: "Please input activity form",
      trigger: "blur",
    },
  ],
});
const handleCurrentChangeRow = (val: User) => {
  for (let index = 0; index < state.tableData.length; index++) {
    state.tableData[index].edit = false;
  }
  state.tableData[val.index].edit = true;
  console.log(" state.tableData[val.index] :>> ", state.tableData[val.index]);
};
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid: any) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
onMounted(() => {
  state.tableData = [];
  for (let index = 0; index < 40; index++) {
    state.tableData.push({
      edit: false,
      index: index,
      date: "2016-05-02",
      name: "王小虎",
      switch: false,
      address: "上海市普陀区金沙江路 1518 弄",
    });
  }
});
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

// computed(()=>{

//     return keys;
// });
const pageInfo = reactive({
  currentPage: 1,
  total: 10,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40],
  layout: "total, prev, pager, next,sizes",
});

const state: any = reactive({
  height: 0,
  columnData: [
    {
      label: "时间",
      prop: "date",
    },
    {
      label: "昵称",
      prop: "name",
      render: true,
    },
    {
      label: "状态",
      prop: "status",
      render: true,
    },

    {
      label: "地址",
      render: true,
      prop: "address",
    },
  ],
  tableData: [],
});
const handleSeach = (size: number) => {
  console.log("size :>> ", size);
};
const getHeight = (height: number) => {
  state.height = height;
};
const handleGoDetail = () => {
  centerDialogVisible.value = true;
};
const handleSizeChange = (size: number) => {
  pageInfo.pageSize = size;
};
const handleCurrentChange = (page: number) => {
  pageInfo.currentPage = page;
};
const getCurrentColumns = (data: Column[]) => {
  state.columnData = data;
};
</script>

<style  scoped lang="scss" >
</style>
